// author: xuzhen97
// description: 这是写普通的表格样式
// 条件搜索区域的样式
.crm-content__search {
  margin: 0.5rem 0;
  display: flex;
  // border: 1px solid red;
  .el-form-item {
    margin-bottom: 0.5rem;
  }
  .crm-content__search__condition {
    flex: 1;
    .crm-content__search__condition__main {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 5px;
    }
    .crm-content__search__condition__secondary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 5px;
    }
  }
  .crm-content__search__control {
    padding: 0 0 0 1rem;
    .el-link {
      margin-left: 0.5rem;
    }
  }
}
// 工具栏目的样式
.crm-content__toolbar {
  display: inline-flex;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem 0;
}
// 批量操作提示消息框的样式
.crm-content__message {
  margin: 0.5rem 0;
  padding: 0;
  background-color: #e6f7ff;
  color: #51575a;
  .crm-content__message__text {
    color: #40a9ff;
  }
}
// 数据表格内的操作按钮布局样式
.crm-op-container {
  display: inline-flex;
  gap: 0.8rem;
  padding: 0;
}
// 消息提示的动画效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to
  /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
// 分页的样式
.crm-content__paging {
  padding: 1rem 0 0 1rem;
}
// 这是条件搜索区域 el-form-item 里面套的div的样式
// 这里是为了处理日期这种非规则宽度的条件样式，让其在一行内排列，结合下面的样式使用
.el-form-item-flex-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 1rem;
}
$el-form-item-width: 350px;
$el-form-item-label-width: 120px;
// el-form-item-width 正常的el-form-item的宽度
// 对于日期这种不规则的可能要占用两个宽度，使用el-form-item-2width
// 这样整体布局自适应会好一点
.el-form-item-width {
  width: $el-form-item-width;
  display: flex;
  flex-direction: row;
  > label {
    flex-shrink: 0;
    width: $el-form-item-label-width;
  }
  > div {
    flex-grow: 1;
  }
}
.el-form-item-2width {
  // +10 是两个元素之间还有10px的内边距
  width: $el-form-item-width * 2 + 10px;
  display: flex;
  flex-direction: row;
  > label {
    flex-shrink: 0;
    width: $el-form-item-label-width;
  }
  > div {
    flex-grow: 1;
  }
}
// 补充样式
.el-date-editor {
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-input {
  width: 100%;
}
